<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收获水果大赛</title>
    <script src="./js/util.js"></script>
    <link rel="stylesheet" href="./css/index.css">
</head>

<style>
    #item {
        position: absolute;
        top: -34px;
        left: 10px;
    }

    .center {
        background-image: url(./image/backgroundimg.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 550px;
        float: left;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
    }
</style>

<body>
    <div class="play">
        <div class="wrap clearfix">
            <div class="play-top">
                <div class="fl">
                    <span>收获水果大赛</span>
                </div>
                <div class="gif"></div>
                <div class="gd">
                    <span>关灯</span>
                </div>
                <div class="sc">
                    <span>收藏</span>
                </div>
                
            </div>        
            <div class="center">
                <div id="item">
                    <img src="./image/1.png" alt="丢失">
                </div>
                <button>开始游戏</button>
            </div>
            <div class="left">
                <!-- 不显示计分板 -->
                <div style="display: none;">
                    <h3>计分板</h3>
                    <br><br>
                    <h3>当前得分：<span id="score">0</span>分</h3>
                    <h3>当前失分：<span id="miss">0</span>分</h3>
                    <h3>当前的速度为：<span id="speed">1</span></h3>
                    <br></br>
                    <h3>总分：<span id="total">0</span>分</h3>
                </div>
            </div>
            <div class="right">
                <b>操作说明</b>
                <div class="Gamekey">
                    <span class="player1"></span>
                    <span class="ico_mouse"></span>点击
                </div>
                <b>游戏目标</b>
                <p>点击“开始游戏”，随机掉下水果，点中它，千万别让他掉下来！！</p>
                <b>如何开始</b>
                <p>点击 [开始游戏] 即可开始游戏</p>
            </div>
            <div class="bottom">
                <div class="b_l">
                    <span class="cw">重玩</span>
                    <span class="fd">放大</span>
                    <span class="sx">缩小</span>
                    <span class="zj">最佳</span>
                    <span class="qp">全屏</span>
                </div>
                <div class="b_r">
                    <span class="sj">到手机上玩</span>
                    <span class="xz">下载</span>
                    <span class="pl">评论</span>
                    <span class="jb">举报</span>
                </div>
            </div>
        </div>

    </div>
</body>
<script>
    window.onload = function () {
        var rand = Math.floor(Math.random() * 10)
        // 得分初始0
        var points = 0
        // 获取水果元素
        var item = document.getElementById('item')
        // 获取到center的高度
        var center = document.getElementsByClassName('center')[0]
        var height = getIntStyle(center, 'height')

        // 获取开始按钮
        var button = document.getElementsByTagName('button')[0]

        // 将图片放进数组
        var fruits = []
        for (let i = 1; i <= 10; i++) {
            fruits.push('./image/' + i + '.png')
        }
        // 随机展示一张图片
        var img = document.getElementsByTagName('img')[0]
        img.src = fruits[rand]

        // 获取图片水平出现位置实际的最大宽度范围（比如缩小窗口）
        var rangeWidth = parseInt(getStyle(center, 'width')) - parseInt(getStyle(img, 'width'))

        // 定义图片在水平方向随机出现的位置
        rand = Math.round(Math.random() * (rangeWidth - 2) + 2)
        item.setAttribute('style', 'left:' + rand + 'px')

        // 删除center标签内的文本节点（#text）
        clearTextNode(center)
        // 游戏时长为60s
        var times = 60000
        button.onclick = function () {
            gameStart()
            setTimeout(() => {
                gameOver()
            }, times);
        }
    }

    function clearTextNode(center) {
        // 删除center标签内的文本节点（#text）
        for (let i = 0; i < center.childNodes.length; i++) {
            if (center.childNodes[i].nodeName == '#text')
                center.removeChild(center.childNodes[i])
        }
    }
    // 点中之后或者下落到底，重新生成一个水果
    function init(cloneNode) {
        if (cloneNode == null)
            return;
        clearTextNode(cloneNode)
        var rand = Math.floor(Math.random() * 10)
        // 获取到center的高度
        var center = document.getElementsByClassName('center')[0]
        // 获取开始按钮
        var button = document.getElementsByTagName('button')[0]
        // 将图片放进数组
        var fruits = []
        for (let i = 1; i <= 10; i++) {
            fruits.push('./image/' + i + '.png')
        }
        // console.log('要展示的图片是：' , cloneNode.childNodes[0])
        // 随机展示一张图片
        cloneNode.childNodes[0].src = fruits[rand]
        // 获取图片水平出现位置实际的最大宽度范围（比如缩小窗口）
        var rangeWidth = parseInt(getStyle(center, 'width')) - 34

        // 定义图片在水平方向随机出现的位置，垂直方向位置
        rand = Math.round(Math.random() * (rangeWidth - 2) + 2)
        cloneNode.setAttribute('style', `left: ${rand}px; top: -34px`)

        // 插到btn前面
        center.insertBefore(cloneNode, button)
        // console.log('现在的结构是：', center.childNodes)
    }

    // 当图片下落完成之后所执行的操作
    function endFn() {
        // 抖动游戏窗口，表示没有接到水果
        let dom = document.getElementsByClassName('center')[0]
        doShake(dom)

        dom = document.getElementsByClassName('center')[0]
        // 克隆一份当前下落的元素
        var cloneNode = dom.childNodes[0].cloneNode(true)
        // 掉地上的水果就消失吧
        dom.removeChild(dom.childNodes[0])

        // console.log('下一个是: ', cloneNode)
        init(cloneNode)
        // 掉地上就扣分
        losePoints();

        gameStart();
    }

    function speed() {
        let v = parseFloat(document.getElementById('speed').innerText)
        v += 0.2 * Math.LOG10E
        document.getElementById('speed').innerText = Math.round(v * 100) / 100
        return v
    }
    // 点中图片之后要执行的操作
    function endFn2() {
        let dom = document.getElementsByClassName('center')[0]
        // 克隆一份当前下落的元素
        var cloneNode = dom.childNodes[0].cloneNode(true)
        // 点中的水果也消失吧
        // console.log('删除了[0]', dom.childNodes[0])
        dom.removeChild(dom.childNodes[0])
        // 加分
        gainPoints();
        init(cloneNode)
        gameStart();
    }
    // 丢分函数
    function losePoints() {
        let p = document.getElementById('miss')
        let point = parseInt(p.innerText)
        p.innerText = ++point
    }
    // 得分函数
    function gainPoints() {
        let p = document.getElementById('score')
        let point = parseInt(p.innerText)
        p.innerText = ++point
    }

    // 开始游戏
    function gameStart() {
        let button = document.getElementsByTagName('button')[0]
        let item = document.getElementById('item')
        let img = document.getElementsByTagName('img')[0]
        let center = document.getElementsByClassName('center')[0]
        var height = getIntStyle(center, 'height')
        // 隐藏开始按钮
        button.setAttribute('style', 'display: none');
        // 图片开始下落
        doMove(item, 'top', speed(), height, endFn)
        // 给出现的水果绑定点击事件
        item.onclick = function () {
            // 点中之后的效果
            img.src = './image/qq.png'
            doShake(item)
            chOpacity(item, 0.06, 0, endFn2)
        }

    }
    // 结束游戏
    function gameOver() {
        // 计算总分
        let g = document.getElementById('score')
        let l = document.getElementById('miss')
        let t = document.getElementById('total')
        let a = parseInt(g.innerText) - parseInt(l.innerText)
        t.innerText = a
        // 
        alert('游戏结束，你的得分是' + a + '分')
        location.reload()
    }
</script>

</html>